<!doctype html>
<html>

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0" />
    <meta name="format-detection" content="telephone=no,email=no,date=no,address=no">
    <link rel="stylesheet" type="text/css" href="../../../css/app.css">
    <link rel="stylesheet" type="text/css" href="../../../css/tabBar.css">
    <link rel="stylesheet" type="text/css" href="../comm/buy_comm.css"/>
    <link rel="stylesheet" type="text/css" href="./css/refund_apply.css">
    <title>退款申请</title>
    <style type="text/css">
    	.order_yzc{
    		width: 22px;display: inline-block;margin: -2px 0 0 -2px;vertical-align: middle;
    	}
    </style>
</head>

<body>
	<div class="header navigationBar">
      	<div class="wrapper">
          	<span id="btn-back" class="header-btn left-btn backtrack"></span>
          	<span class="title">退款申请</span>
      	</div>
  	</div>
  	<div class="container top-container">
  		<div class="refund-apply-more" v-if="goodsLength > 1">
  			<div class="refund-apply-more-box">
	  			<div v-for="item in goodsList.goods">
	  				<img :src="item.goods_image+'?x-oss-process=image/resize,m_lfit,w_960'"/>
	  				<p v-html="'数量：'+item.quantity"></p>
	  			</div>
  			</div>
  		</div>
  		<div class="refund-apply-goods" v-else="" v-for="item in goodsList.goods">
  			<div>
  				<img :src="item.goods_image+'?x-oss-process=image/resize,m_lfit,w_960'"/>
  			</div>
  			<h2 v-html="item.goods_name"></h2>
  			<p v-html="'型号：'+item.option_name"></p>
  			<p v-html="'数量：'+item.quantity"></p>
  		</div>
  		<ul class="refund-apply-list" >
  			<li v-if="info.type == 1 && goodsList.order_state != 2" @click="openSelectGoodsState" ref="selectGoodsStateLi">
  				<span>货物状态</span>
  				<i>请选择</i>
  			</li>
  			<li @click="selectRefundReason" ref="selectRefundReason">
  				<span>退款原因</span>
  				<p></p>
  				<i v-html="info.content || '请选择'"></i>
  			</li>
  			<li>
  				<span>退款金额</span>
  				<div>
            <span v-if="goodsList.yzc_status == 1" v-html="goodsList.express_amount!='0.00' ? '¥'+goodsList.express_amount+' + ' : ''"></span>
            <img v-if="goodsList.yzc_status == 1" src="../../../image/shop/yzc_icon.png" class="order_yzc" /><b v-html="goodsList.yzc_status == 1 ? goodsList.order_amount : '¥'+(goodsList.order_amount || 0)"></b>
          </div>
  			</li>
  			<li>
  				<span>退款说明</span>
  				<div>
	  				<input type="text" name="" ref="infoRemark" v-model="info.remark" placeholder="请输入退款说明"/>
  				</div>
  			</li>
  		</ul>
  		<div class="refund-apply-img" v-if="info.type == 2 || reasonType == 1">
  			<h2>上传凭证</h2>
  			<div id="applyImgBox">
  				<div v-for="(img,index) in imgList">
  					<img :src="img"/>
  					<span :data-index="index" @click="deleteImg">×</span>
  				</div>
	  			<div class="ImgBoxFile" @click="imgUpload">
	  				<img src="../../../image/shop/buy/buy-42.png"/>
	  				<p>上传凭证<br />(最多6张)</p>
	  				<!--<input type="file" name="" id="imgUploadFile" value="" />-->
	  			</div>
  			</div>
  		</div>
  		<div class="refund-apply-question" ref="refundQuestion">
  			<div class="" @click="closeElectReason"></div>
  			<section>
  				<h2>退款原因</h2>
	  			<ul :class="is_group ? 'groupChecked' : ''">
	  				<li v-for="(item,index) in reasonList" :data-id="item.order_return_reason_id" @click="liSelectReason" :data-index="index">
	  					<span v-html="item.content"></span>
	  					<input type="radio" name="return-reason" class="aui-radio" value="" :data-content="item.content"
	  						:checked="reasonIndex == index ? 'checked': ''" :data-id="item.order_return_reason_id" />
  						<textarea v-if="index == (reasonList.length - 1)" rows="0" cols="0" placeholder="请输入其他原因" ref="reasonTextarea"></textarea>
	  				</li>
	  			</ul>
  			</section>
  			<a href="javascript:void(0);" class="refund-apply-question-btn" :style="is_group ? 'background: #f42020;color: #fff;' : ''" @click="getSelectReason">确定</a>
  		</div>
  		<div class="refund-goods-state" ref="refundGoodsState">
  			<div class="" @click="closeSelectGoodsState"></div>
  			<section>
  				<h2>货物状态</h2>
  				<ul :class="is_group ? 'groupChecked' : ''">
  					<li @click="selectState" data-index="0">
  						<span>已收到货</span>
  						<input type="radio" name="state" class="aui-radio" :checked="stateIndex == 0 ? 'checked' : ''" value="" data-txt="已收到货" data-index="1"/>
  					</li>
  					<li @click="selectState" data-index="1">
  						<span>未收到货</span>
  						<input type="radio" name="state" class="aui-radio" :checked="stateIndex == 1 ? 'checked' : ''" value="" data-txt="未收到货" data-index="2"/>
  					</li>
  				</ul>
  				<a href="javascript:void(0);" @click="selectGoodsStateSuer" :style="is_group ? 'background: #f42020;color: #fff;' : ''">确定</a>
  			</section>
  		</div>
  		<a href="javascript:void(0);" :class="is_group ? 'refund-apply-btn refund-group-apply-btn' : 'refund-apply-btn'" @click="submitRefundInfo">提交</a>
  	</div>
</body>
<script src="../../sea.js" data-main="../../main"></script>
<script type="text/javascript" src="../../vue.js"></script>
<script type="text/javascript" src="./js/refundApply.js"></script>
</html>
